<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>代码狂想 | 技术博客</title>
    <style>
        /* 基础样式与野蛮主义风格 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Arial', sans-serif;
            line-height: 1.6;
            background-color: #f0f0f0;
            color: #222;
            padding: 20px;
            max-width: 1200px;
            margin: 0 auto;
        }

        /* 野蛮主义风格特点：粗体、不对称、高对比度 */
        header {
            background-color: #000;
            color: #fff;
            padding: 30px;
            margin-bottom: 30px;
            border: 5px solid #ff0066;
            position: relative;
        }

        h1 {
            font-size: 4rem;
            font-weight: 900;
            text-transform: uppercase;
            letter-spacing: -2px;
            line-height: 1;
        }

        .tagline {
            font-size: 1.5rem;
            margin-top: 10px;
            color: #ff0066;
        }

        /* 导航样式 - 保持原始链接外观但放大 */
        nav {
            background-color: #ff0066;
            padding: 15px;
            margin-bottom: 30px;
        }

        nav ul {
            list-style: none;
            display: flex;
            flex-wrap: wrap;
        }

        nav li {
            margin-right: 30px;
        }

        nav a {
            color: #000;
            text-decoration: none;
            font-weight: bold;
            font-size: 1.2rem;
            padding: 5px 10px;
            background-color: #fff;
        }

        nav a:hover {
            background-color: #000;
            color: #fff;
        }

        /* 主要内容区域 - 不对称布局 */
        .container {
            display: grid;
            grid-template-columns: 2fr 1fr;
            gap: 30px;
        }

        /* 文章卡片 - 野蛮主义风格盒子 */
        article {
            background-color: #fff;
            padding: 25px;
            margin-bottom: 30px;
            border: 3px solid #000;
            box-shadow: 8px 8px 0 #000;
        }

        article h2 {
            font-size: 2rem;
            margin-bottom: 15px;
            color: #ff0066;
            border-bottom: 2px solid #000;
            padding-bottom: 10px;
        }

        .meta {
            font-size: 0.9rem;
            color: #666;
            margin-bottom: 15px;
        }

        .read-more {
            display: inline-block;
            background-color: #000;
            color: #fff;
            padding: 8px 15px;
            text-decoration: none;
            font-weight: bold;
            margin-top: 15px;
        }

        /* 侧边栏 */
        aside {
            background-color: #000;
            color: #fff;
            padding: 25px;
            border: 3px solid #ff0066;
        }

        aside h3 {
            font-size: 1.8rem;
            margin-bottom: 20px;
            color: #ff0066;
        }

        .categories ul {
            list-style: none;
        }

        .categories li {
            margin-bottom: 10px;
            padding: 8px;
            background-color: #333;
        }

        .categories a {
            color: #fff;
            text-decoration: none;
        }

        /* 野蛮主义风格的特色元素 */
        .brutal-element {
            height: 10px;
            background-color: #ff0066;
            margin: 20px 0;
        }

        footer {
            background-color: #000;
            color: #fff;
            padding: 30px;
            text-align: center;
            margin-top: 30px;
            border-top: 5px solid #ff0066;
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .container {
                grid-template-columns: 1fr;
            }

            h1 {
                font-size: 2.5rem;
            }

            nav ul {
                flex-direction: column;
            }

            nav li {
                margin-bottom: 10px;
            }
        }
    </style>
</head>

<body>
    <header>
        <h1>代码狂想</h1>
        <p class="tagline">原始 · 直接 · 不妥协的技术思考</p>
    </header>

    <nav>
        <ul>
            <li><a href="index.html">首页</a></li>
            <li><a href="#">前端开发</a></li>
            <li><a href="#">后端架构</a></li>
            <li><a href="#">算法与数据结构</a></li>
            <li><a href="#">设计模式</a></li>
            <li><a href="about.html">关于</a></li>
        </ul>
    </nav>

    <div class="container">
        <main>
            <article>
                <h2>野蛮主义在Web设计中的复兴</h2>
                <div class="meta">发布于 2023年10月15日 · 前端设计 · 8分钟阅读</div>
                <p>新野蛮主义设计风格是对过度设计、用户界面同质化的反击。它拥抱原始HTML的本来面貌，使用高对比度色彩和大胆的排版，创造出一种直接、不加修饰的数字体验。</p>
                <p>这种风格的核心是功能优先于形式，内容优先于装饰。在技术博客中应用这种风格，可以使读者更专注于文字内容本身，而不是被花哨的界面元素分散注意力。</p>
                <a href="detail.html" class="read-more">继续阅读</a>
            </article>

            <div class="brutal-element"></div>

            <article>
                <h2>JavaScript引擎优化技巧</h2>
                <div class="meta">发布于 2023年10月10日 · JavaScript · 12分钟阅读</div>
                <p>现代JavaScript引擎已经非常智能，但了解其内部工作原理仍然可以帮助我们编写更高效的代码。本文将探讨V8引擎的工作机制以及如何利用这些知识优化JavaScript应用。</p>
                <p>从隐藏类到内联缓存，从垃圾回收到即时编译，我们将深入探讨这些概念如何影响代码性能。</p>
                <a href="detail.html" class="read-more">继续阅读</a>
            </article>

            <div class="brutal-element"></div>

            <article>
                <h2>微服务架构的陷阱与解决方案</h2>
                <div class="meta">发布于 2023年10月5日 · 后端架构 · 15分钟阅读</div>
                <p>微服务架构在提供灵活性和可扩展性的同时，也带来了分布式系统的复杂性。本文将讨论常见的微服务陷阱，如数据一致性、服务发现和分布式追踪等问题。</p>
                <p>我们还将探讨如何使用服务网格、事件溯源和CQRS等模式来解决这些挑战。</p>
                <a href="detail.html" class="read-more">继续阅读</a>
            </article>
        </main>

        <aside>
            <div class="categories">
                <h3>分类</h3>
                <ul>
                    <li><a href="#">前端开发 (12)</a></li>
                    <li><a href="#">后端架构 (8)</a></li>
                    <li><a href="#">JavaScript (15)</a></li>
                    <li><a href="#">Python (7)</a></li>
                    <li><a href="#">数据库 (5)</a></li>
                    <li><a href="#">DevOps (6)</a></li>
                    <li><a href="#">算法 (10)</a></li>
                </ul>
            </div>

            <div class="brutal-element"></div>

            <div class="about">
                <h3>关于本站</h3>
                <p>代码狂想是一个专注于技术深度和原始表达的技术博客。我们拒绝浮夸的设计，专注于内容的本质。</p>
            </div>

            <div class="brutal-element"></div>

            <div class="subscribe">
                <h3>订阅更新</h3>
                <form>
                    <input type="email" placeholder="你的电子邮箱"
                        style="padding: 10px; width: 100%; margin-bottom: 10px; border: 2px solid #ff0066;">
                    <button type="submit"
                        style="padding: 10px; width: 100%; background: #ff0066; color: white; border: none; font-weight: bold;">订阅</button>
                </form>
            </div>
        </aside>
    </div>

    <footer>
        <p>代码狂想 &copy; 2023 · 遵循野蛮主义设计原则构建</p>
        <p>联系方式: contact@codecraze.blog</p>
    </footer>
</body>

</html>